<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Developed By M Abdur Rokib Promy">
    <meta name="author" content="rokib">
    <meta name="keywords" content="Bootstrap 3, Template, Theme, Responsive, Corporate, Business">
    <link rel="shortcut icon" href="${Prefix}img/favicon.png">

    <title>${Catalog.name}_${Site.name}</title>

    <!-- Bootstrap core CSS -->
    <link href="${Prefix}css/bootstrap.min.css" rel="stylesheet">
    <link href="${Prefix}css/theme.css" rel="stylesheet">
    <link href="${Prefix}css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="${Prefix}assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link rel="stylesheet" href="${Prefix}css/flexslider.css"/>
    <link href="${Prefix}assets/bxslider/jquery.bxslider.css" rel="stylesheet" />
    <link rel="stylesheet" href="${Prefix}css/animate.css">
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="${Prefix}assets/owlcarousel/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="${Prefix}css/mixitup.css">

    <!-- Custom styles for this template -->
    <link rel="stylesheet" type="text/css" href="${Prefix}css/component.css">
    <link href="${Prefix}css/style.css" rel="stylesheet">
    <link href="${Prefix}css/style-responsive.css" rel="stylesheet" />
    <link rel="stylesheet" href="${Prefix}css/magnific-popup.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
      <script src="${Prefix}js/html5shiv.js"></script>
      <script src="${Prefix}js/respond.min.js"></script>
    <![endif]-->
    <style>div.companyinfo p, div.copyright p, address p { width:100%; }</style>
  </head>

  <body>
    <!--header start-->
    <@cms_include file="header.template.html"></@cms_include>
    <!--header end-->

    <!--breadcrumbs start-->
  <div class="breadcrumbs">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 col-sm-4">
          <h1>${Catalog.name}</h1>
        </div>
        <div class="col-lg-8 col-sm-8" style="text-align:right;padding-top: 5px;">
          <a class="position" href="${Site.link}">首页</a>
          <#list Catalog.ancestors?split(":") as catalogId>
            <@cms_catalog id="${catalogId}" level="Self">
              <#list DataList as catalog>
                 > <a class="position" href="${catalog.link}">${catalog.name}</a>
              </#list>
            </@cms_catalog>
          </#list>
        </div>
      </div>
    </div>
  </div>
    <!--breadcrumbs end-->


    <div class="container">

        <div class="row">
        <div class="col-md-6">
            <ul id="filters" class="clearfix">
                <li><span class="filter active" data-filter="dk gk">所有系列</span></li>
                <li><span class="filter" data-filter="dk">DK系列</span></li>
                <li><span class="filter" data-filter="gk">GK系列</span></li>
            </ul>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row  mar-b-30">
        <div id="portfoliolist">
            <div class="col-md-12">
            <@cms_content catalogid="${Catalog.catalogId}" level="CurrentAndChild" page="true" size="120">
            <#list DataList as content>
            <div class="portfolio ${content.shortTitle!}" data-cat="${content.shortTitle!}">
                <div class="portfolio-wrapper">
                	<a href="${content.link}">
                    <div class="portfolio-hover">
                        <div class="image-caption">${content.title}</div>
                      		<#if content.logo??>
                        <img src="${imageSize(content.logo,240, 240)}" alt="${content.title}" />
                        </#if>
                    </div>
                    </a>
                </div>
				<div style="background-color: #fff;text-align: center;padding-top: 5px;">${content.title}</div>
            </div>
            </#list>
            </@cms_content>
            </div>
        </div>
       </div>
    </div>
    <!--footer start-->
    <@cms_include file="footer.template.html"></@cms_include>
    <!--footer end-->

    <!-- js placed at the end of the document so the pages load faster
    <script src="${Prefix}js/jquery.js"></script> -->
    <script src="${Prefix}js/jquery-1.8.3.min.js"></script>
    <script src="${Prefix}js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${Prefix}js/hover-dropdown.js"></script>
    <script defer src="${Prefix}js/jquery.flexslider.js"></script>
    <script type="text/javascript" src="${Prefix}assets/bxslider/jquery.bxslider.js"></script>

    <script type="text/javascript" src="${Prefix}js/jquery.parallax-1.1.3.js"></script>
    <script src="${Prefix}js/wow.min.js"></script>
    <script src="${Prefix}assets/owlcarousel/owl.carousel.js"></script>
    <script src="${Prefix}js/mixitup.js"></script>
    <script src="${Prefix}js/jquery.easing.min.js"></script>
    <script src="${Prefix}js/link-hover.js"></script>

    <!--common script for all pages-->
    <script src="${Prefix}js/common-scripts.js"></script>

    <script src="${Prefix}js/revulation-slide.js"></script>
    <script src="${Prefix}js/jquery.magnific-popup.js"></script>

    <script type="text/javascript">
    $('.image-caption a').tooltip();
    $(function () {

        var filterList = {

            init: function () {

                // MixItUp plugin
                // http://mixitup.io
                $('#portfoliolist').mixitup({
                    targetSelector: '.portfolio',
                    filterSelector: '.filter',
                    effects: ['fade'],
                    easing: 'snap',
                    // call the hover effect
                    onMixEnd: filterList.hoverEffect()
                });

            },

            hoverEffect: function () {
                $("[rel='tooltip']").tooltip();
                // Simple parallax effect
                $('#portfoliolist .portfolio .portfolio-hover').hover(
        function(){
            $(this).find('.image-caption').slideDown(250); //.fadeIn(250)
        },
        function(){
            $(this).find('.image-caption').slideUp(250); //.fadeOut(205)
        }
    );



            }

        };

        // Run the show!
        filterList.init();


    });

    $( document ).ready(function() {

        $('.magnefig').each(function(){
            $(this).magnificPopup({
                type:'image',
                removalDelay: 300,
                mainClass: 'mfp-fade'
            })
        });
    });
    </script>

  <script>

    $(document).ready(function() {

        $("#owl-demo").owlCarousel({

            autoPlay: 3000, //Set AutoPlay to 3 seconds

            items : 4,
            itemsDesktop : [1199,3],
            itemsDesktopSmall : [979,3],
            stopOnHover : true,

        });

    });

    new WOW().init();


  </script>
 </body>
</html>
